<template>
  <div class="activity-list">
    <template 
      v-for="(item, index) in activity"
      :key="index"
    >
      <GLink
      v-if="item.show"
      :href="`/activity/${item.id}`"
      target="_blank"
      class="activity-list-content"
    >
      <div class="activity-list-item">
        <div class="activity-list-item-img">
          <img :src="item?.coverImg" :alt="item?.title" class="w-[150px] h-[84px]">
        </div>
        <div class="flex-1 min-w-[100px] activity-list-item-content">
          <div class="flex items-center">
            <StatusTag :activityType="item?.liveBroadcast" class="mr-[8px]" />
            <span class="ellipsis flex-1 activity-list-item-title">{{ item?.title }}</span>
          </div>
          <div class="text-[var(--devui-placeholder)] activity-content-time">
            <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
            <span>{{ $t('activity.time') }} {{ dayjs(item?.startTime).format('YYYY-MM-DD') }} {{ $t('activity.to') }} {{ dayjs(item?.endTime).format('YYYY-MM-DD')
              }}</span>
          </div>
          <div v-if="item.hostProvince" class="flex items-center mr-[8px] activity-list-item-location">
            <GIcon name="gt-line-location" class="mr-[4px]" color="#9C9DB4" />
            <span>{{ formatLocation(item.hostProvince, item.hostCity) }}</span>
          </div>
        </div>
        <div>
          <d-button>{{ $t('common.clickView') }}</d-button>
        </div>
      </div>
    </GLink>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import StatusTag from './StatusTag.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
// 定义活动数据类型
interface Activity {
  id: string | number;
  title: string;
  coverImage: string;
  startTime: string | Date;
  endTime: string | Date;
}

// 定义组件属性
const props = defineProps<{
  activity: Activity;
}>();

console.log(props.activity)

const router = useRouter();

// 判断活动是否即将开始（一周内）
const isUpcoming = computed(() => {
  const now = dayjs();
  const startDate = dayjs(props.activity.startTime);
  const diffDays = startDate.diff(now, 'day');
  return diffDays >= 0 && diffDays <= 7;
});

// 判断活动是否已结束
const isEnded = computed(() => {
  const now = dayjs();
  const endDate = dayjs(props.activity.endTime);
  return endDate.isBefore(now);
});

// 处理卡片点击事件
const handleCardClick = () => {
  // 使用window.open在新窗口打开活动详情页
  window.open(`/activity/${props.activity.id}`, '_blank');
};

// 格式化日期范围
const formatDateRange = (startTime: string | Date, endTime: string | Date) => {
  return `${dayjs(startTime).format('YYYY-MM-DD')} ${t('activity.to')} ${dayjs(endTime).format('YYYY-MM-DD')}`;
};

// 格式化地点显示，直辖市只显示城市名称
const formatLocation = (hostProvince: string, hostCity: string) => {
  // 如果省份和城市相同，则只显示城市
  if ( hostProvince === hostCity) {
    return hostCity;
  }
  // 否则显示"省份 · 城市"格式
  return `${hostProvince} · ${hostCity}`;
};

</script>

<style scoped lang="scss">
.activity-list {
  display: flex;
  flex-direction: column;
  &-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    padding: 16px;
    gap: 16px;
    flex-wrap: wrap;
    &:hover {
      background: #F9F9FB;
    }
    &-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    img {
      border-radius: 4px;
      object-fit: cover;
    }
    &-date {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      font-size: 20px;
    }
    &-title {
      font-weight: 600;
      font-size: 16px;
    }
    &-location {
      color:#3B3E55
    }

    &.g-link:hover {
      color: inherit;
    }
  }
  @media screen and (max-width: 768px) {
    .activity-list-item {
      &-img {
        width: 100%;
        img {
          width: calc(100vw - 64px);
          height: 100%;
        }
      }
    }
  }
}
</style>